<div id="banner" class="module-bottom banner-module swiper-container">
  <div class="swiper-wrapper">
    <?php foreach ($banners as $banner) { ?>
      <div class="swiper-slide">
        <?php if ($banner['link']) { ?>
        <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
        <?php } else { ?>
        <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
        <?php } ?>
      </div>
    <?php } ?>
  </div>
  <div class="swiper-pagination swiper-pagination-black"></div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>

<script>
  $(document).ready(function() {
    var module_banner_swiper = new Swiper('#banner', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      loop: true,
      grabCursor: true,
      autoplayDisableOnInteraction: false,
    });

    $('#banner').hover(function() {
      module_banner_swiper.autoplay.stop();
    }, function() {
      module_banner_swiper.autoplay.start();
    });
  });
</script>
